<!-- 基本信息 -->
<template>
  <a-spin :spinning="tableLoad" size="large">
    <a-form>
      <a-form-item
        required
        label="所属公司"
        :label-col="{ md: 5 ,xs: 24 }"
        :wrapper-col="{ md: 16 ,xs: 24 }"
      >
      <a-select v-model="formItem.group_id" allowClear placeholder="请选择所属公司">
        <a-select-option v-for="item in companyAllData" :value="item.id" :key="item.id">{{item.name}}</a-select-option>
      </a-select>
        <!-- <a-cascader
          v-model="groupId"
          :fieldNames="{ label: 'name', value: 'id', children: 'parent' }"
          @change="onChange"
          :options="groupData"
          placeholder="请选择所属公司"
        /> -->
      </a-form-item>
      <a-form-item
        required
        label="设备名称"
        :label-col="{ md: 5 ,xs: 24 }"
        :wrapper-col="{ md: 16 ,xs: 24 }"
      >
        <a-input v-model="formItem.name" placeholder="请输入设备名称" />
      </a-form-item>
      <a-form-item required label="设备描述" :label-col="{ md: 5 ,xs: 24 }" :wrapper-col="{ md: 16 ,xs: 24 }">
        <a-textarea v-model="formItem.describe" placeholder="请输入设备描述" :rows="4" />
      </a-form-item>
      <a-form-item required label="设备信息" :label-col="{ md: 5 ,xs: 24 }" :wrapper-col="{ md: 16 ,xs: 24 }">
        <a-form>
          <a-form-item
            label="设备外尺寸："
            required
            :label-col="{ md: 4 ,xs: 24 }"
            :wrapper-col="{ md: 20 ,xs: 24 }"
          >
            长：
            <a-input
              v-model="formItem.tunnel_abroad_long"
              class="mr5"
              type="number"
              :step="0.01"
              min="0"
              style="width: 80px"
              placeholder="长"
            />宽：
            <a-input
              v-model="formItem.tunnel_abroad_width"
              type="number"
              :step="0.01"
              class="mr5"
              min="0"
              style="width: 80px"
              placeholder="宽"
            />高：
            <a-input
              v-model="formItem.tunnel_abroad_height"
              type="number"
              :step="0.01"
              min="0"
              style="width: 80px"
              placeholder="高"
            />&nbsp;&nbsp;&nbsp;&nbsp;单位（米）
          </a-form-item>
          <a-form-item
            label="设备长度："
            required
            :label-col="{ md: 4,xs: 24 }"
            :wrapper-col="{ md: 20 ,xs: 24 }"
          >
            <a-input
              v-model="formItem.tunnel_long"
              type="number"
              :step="0.01"
              min="0"
              style="width: 80px"
              placeholder="长"
            />&nbsp;&nbsp;&nbsp;&nbsp;米
          </a-form-item>
          <a-form-item
            label="可装载面："
            required
            :label-col="{ md: 4,xs: 24 }"
            :wrapper-col="{ md: 20 ,xs: 24 }"
          >
            宽：
            <a-input
              v-model="formItem.carry_width"
              type="number"
              :step="0.01"
              min="0"
              style="width: 80px"
              placeholder="宽"
              class="mr5"
            /> 高：
            <a-input
              v-model="formItem.carry_height"
              type="number"
              :step="0.01"
              min="0"
              style="width: 80px"
              placeholder="高"
            />&nbsp;&nbsp;&nbsp;&nbsp;单位（mm）
          </a-form-item>
          <a-form-item
            label="选用板棚规格："
            required
            :label-col="{ md: 4,xs: 24 }"
            :wrapper-col="{ md: 20 ,xs: 24 }"
          >
            <a-input v-model="formItem.board_specs" placeholder="选用板棚规格" />
          </a-form-item>
          <a-form-item
            label="棚板安放："
            required
            :label-col="{ md: 4,xs: 24 }"
            :wrapper-col="{ md: 20 ,xs: 24 }"
          >
            <a-input v-model="formItem.board_put" placeholder="棚板安放" />
          </a-form-item>
          <a-form-item
            label="台车长度："
            required
            :label-col="{ md: 4 ,xs: 24 }"
            :wrapper-col="{ md: 20 ,xs: 24 }"
          >
          <a-input-group compact>
            <a-input
              v-model="formItem.trolley_long"
              type="number"
              :step="0.01"
              min="0"
              style="width: 70%"
              placeholder="台车长度"
            />
            <div style="width: 30%;height: 32px;line-height: 32px;">&nbsp;&nbsp;&nbsp;&nbsp;单位（mm）</div>
          </a-input-group>
          </a-form-item>
          <a-form-item
            label="台车数："
            required
            :label-col="{ md: 4 ,xs: 24 }"
            :wrapper-col="{ md: 20 ,xs: 24 }"
          >
            <a-input v-model="formItem.trolley_num" placeholder="台车数" />
          </a-form-item>
          <a-form-item
            label="窑内总容积："
            required
            :label-col="{ md: 4 ,xs: 24 }"
            :wrapper-col="{ md: 20 ,xs: 24 }"
          >
            <a-input v-model="formItem.kiln_volume" placeholder="窑内总容积" />
          </a-form-item>
          <a-form-item
            label="台车装载容积："
            required
            :label-col="{ md: 4 ,xs: 24 }"
            :wrapper-col="{ md: 20 ,xs: 24 }"
          >
            <a-input v-model="formItem.trolley_volume" placeholder="台车可装载容积" />
          </a-form-item>
        </a-form>
      </a-form-item>
      <a-form-item label="设备图片：" required :label-col="{ md: 5 ,xs: 24 }" :wrapper-col="{ md: 16 ,xs: 24 }">
        <UploadImage :defaultImageList="imageLists" :maximum="1" ref="uploadThumbImage"></UploadImage>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 16, offset: 6  }">
        <a-button
          class="mr20"
          style="width: 120px;"
          type="primary"
          html-type="submit"
          :loading="confirmLoading"
          @click="addBtn"
        >下一步</a-button>
        <a-button type="danger" style="width: 120px;" @click="returnBtn">返回设备列表</a-button>
      </a-form-item>
    </a-form>
  </a-spin>
</template>

<script>
import { mapState, mapActions } from "vuex";
import UploadImage from "@C/upload/UploadImage";
export default {
  components: {
    UploadImage
  },
  name: "BasicInfo",
  data() {
    return {
      /* 添加编辑 */
      confirmLoading: false, //按钮loading状态
      tableLoad: false,
      groupId: [],
      formItem: {
        group_id: undefined,
        name: "",
        describe: "",
        tunnel_abroad_long: "",
        tunnel_abroad_width: "",
        tunnel_abroad_height: "",
        tunnel_long: "",
        carry_width: "",
        carry_height: "",
        board_specs: "",
        board_put: "",
        trolley_long: "",
        trolley_num: "",
        kiln_volume: "",
        trolley_volume: "",
        img_pic: ""
      },
      imageLists: []
      /* 添加编辑end */
    };
  },
  mounted() {
    // this.groupAll();
    this.companyAll()
    const equipment_id = this.$route.query.equipment_id;
    if (this.$route.query.edit && equipment_id != undefined) {
      this.changeData();
    }
  },
  computed: {
    ...mapState({
      groupData: state => state.group.groupData,
      companyAllData: state => state.group.companyAllData,
      
      itemDetail: state => state.equipment.itemDetail,
      requestCode: state => state.equipment.requestCode,
      addEquipmentId: state => state.equipment.addEquipmentId // 添加的设备id
    })
  },
  watch: {
    itemDetail(newData, oldData){
      // this.groupId = [];
      //   for (const key in this.itemDetail.group_ids) {
      //     this.groupId.push(Number(this.itemDetail.group_ids[key]));
      //   }
        // console.log(this.itemDetail);
        this.formItem = {
          id: this.itemDetail.id,
          group_id: Number(this.itemDetail.group_id),
          name: this.itemDetail.name,
          describe: this.itemDetail.describe,
          tunnel_abroad_long: this.itemDetail.tunnel_abroad_long,
          tunnel_abroad_width: this.itemDetail.tunnel_abroad_width,
          tunnel_abroad_height: this.itemDetail.tunnel_abroad_height,
          tunnel_long: this.itemDetail.tunnel_long,
          carry_width: this.itemDetail.carry_width,
          carry_height: this.itemDetail.carry_height,
          board_specs: this.itemDetail.board_specs,
          board_put: this.itemDetail.board_put,
          trolley_long: this.itemDetail.trolley_long,
          trolley_num: this.itemDetail.trolley_num,
          kiln_volume: this.itemDetail.kiln_volume,
          trolley_volume: this.itemDetail.trolley_volume,
          img_pic: this.itemDetail.img_pic
        };
        if (this.formItem.img_pic != null) {
          let imgLists = {
            status: "finished",
            url: this.itemDetail.img_pic
          };
          this.imageLists.push(imgLists);
        }
    }
  },
  methods: {
    ...mapActions({
      groupAll: "group/groupAll", //设备分组信息
      companyAll: "group/companyAll", //公司信息
      dataAdd: "equipment/dataAdd", //添加
      dataEdit: "equipment/dataEdit", //编辑
      dataDetail: "equipment/dataDetail" //详情
      
    }),
    /* 通用模块 */
    // 编辑获取数据
    changeData() {
      this.tableLoad = true;
      const id = this.$route.query.equipment_id;
      this.dataDetail(id);
      setTimeout(() => {
        this.tableLoad = false;
      }, 1000);
    },
    /* 通用模块end */
    // 分组选择
    onChange(value) {
      this.formItem.group_id = value[value.length - 1];
    },
    // 提交
    addBtn() {
      this.confirmLoading = true;
      console.log(this.formItem);
      if (this.$refs.uploadThumbImage.uploadImageList.length > 0) {
        this.formItem.img_pic = this.$refs.uploadThumbImage.uploadImageList[0].url;
      }
      if (this.$route.query.edit) {
        const id = this.$route.query.equipment_id;
        this.formItem.id = id;
        this.dataEdit(this.formItem); //编辑
      } else {
        this.dataAdd(this.formItem); //添加
      }
      setTimeout(() => {
        this.confirmLoading = false;
      }, 1000);
    },
    //返回
    returnBtn() {
      const that = this;
      this.$confirm({
        title: `您确定要返回设备列表吗?`,
        content: `返回上一页将不保留当前输入数据!`,
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          that.$router.push("/equipment/List");
        }
      });
    }
  }
};
</script>

<style scoped>
</style>
